// ================ 获取文章类别的下拉框数据 ================
const form = layui.form

axios.get('/my/article/cates').then(({ data: { data } }) => {
    // console.log(res);

    let newArr = data.map(
        ({ Id, name }) => `<option value="${Id}">${name}</option>`
    )

    $('[name=cate_id]').append(newArr.join(''))

    // 手动渲染更新
    form.render()
})

// 富文本编辑器的代码
const E = window.wangEditor
const editor = new E('#contentBox')
// 或者 const editor = new E(document.getElementById('div1'))
editor.config.zIndex = 1
editor.create()

// ====================== 封面的裁切效果 ======================
// 1. 获取裁剪区域的 DOM 元素
let $image = $('.container img')

// 2. 裁剪选项
let options = {
    aspectRatio: 400 / 280,
    preview: '.preview',
}

// 3. 初始化裁剪区域
$image.cropper(options)

// ====================== 点击 ·选择封面· 弹出框，用户选择文件 ======================
$('#btnChooseCoverImage').on('click', function () {
    $('#fileCover').click()
})

// ====================== 给文件域注册change事件, 更换裁切区域的图片 ======================
$('#fileCover').on('change', function () {
    // 获取用户选择的文件
    let file = this.files[0]
    // console.log(file);

    if (!file) {
        return layer.msg('请选择图片')
    }

    // 将文件对象转成地址
    let imgSrc = URL.createObjectURL(file)
    // console.log(imgSrc);

    // 先销毁裁切区域， 在设置图片的src，在重新渲染
    $image.cropper('destroy').attr('src', imgSrc).cropper(options)
})

// =============== 决定文章的状态是已发布，还是草稿 ===============
let state // 变量state 来存储文章的状态（已发布、草稿）
$('#btnPublish').on('click', function () {
    state = '已发布'
})

$('#btnSave').on('click', function () {
    state = '草稿'
})

// =============== 获取表单数据，ajax提交数据 ===============
$('#form').on('submit', function (e) {
    e.preventDefault()

    // 收集表单数据 ==> 接口要求的是 FormData格式数据 （内容 + 封面没有收集到，所以后续通过append来追加）
    let fd = new FormData(this)
    // console.log(fd)

    // 对于FormData收集不到的数据， 可以使用append方法进行追加
    // 语法： fd.append(name, value);

    // 收集到了富文本编辑器内容
    //  editor.txt.html() ==> 可以获取到富文本编辑器的内容（带标签）
    // console.log(editor.txt.html());
    fd.append('content', editor.txt.html())

    // 收集文章的状态
    fd.append('state', state)

    // 处理封面
    $image
        .cropper('getCroppedCanvas', {
            // 创建一个 Canvas 画布
            width: 400,
            height: 280,
        })
        .toBlob(function (blob) {
            // 将 Canvas 画布上的内容，转化为文件对象
            // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据

            // 追加封面数据
            fd.append('cover_img', blob)

            // 把所有的数据都收集到了，才发ajax请求
            axios.post('/my/article/add', fd).then(({ data: { status } }) => {
                if (status !== 0) {
                    // 发布失败
                    return layer.msg('发布失败')
                }

                layer.msg(
                    '发布成功',
                    {
                        time: 1500, //2秒关闭（如果不配置，默认是3秒）
                    },
                    function () {
                        // 关闭后想做些什么
                        // 跳转页面
                        location.href = '../article/art_list.html'
                    }
                )
            })

            // 检测 fd 收集到的数据
            // fd.forEach((value, name) => {
            //     console.log(name, value)
            // })
        })
})
